<template>
    <!-- echarts封装成组件，调用页面提供数据即可 -->
    <div v-bind:id=id v-bind:data=data></div>
</template>

<script>

export default {
    components: {},
    name: "echartsmod",
    data() {
        return {
            ChartLineGraph:null,
        };
    },
    computed: {},
    watch: {
        data:{
            handler(newvalue,oldvalue){
                this.drawLineGraph(this.id,newvalue);
            },
            deep:true
        }
    },
    props:["id","data"],
    methods: {
        drawLineGraph(id,data){
            let that = this;
            let myChart = document.getElementById(id);
            this.ChartLineGraph = this.$echarts.init(myChart);
            this.ChartLineGraph.setOption(data);
            window.addEventListener("resize",function(){
                that.ChartLineGraph.resize()
            })
        }
    },
    created() {},
    mounted() {
        this.drawLineGraph(this.id,this.data)
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {
        if(this.ChartLineGraph){
            this.ChartLineGraph.clear();
        }
    },
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>

</style>